import {PageHeaderWrapper} from '@ant-design/pro-layout';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {DatePicker, Input, Select, Tag} from 'antd';
import type {SorterResult} from 'antd/es/table/interface';
import moment from 'moment';
import React, {useRef, useState} from 'react';
import type {TableListItem} from './data';
import {getDeviceMoteData} from './service';

const TableList: React.FC<{}> = () => {
  const query: { deviceNo?: string; type?: 'normal' | 'run' | 'work' | 'status' } = {
    type: 'status',
  };

  const [sorter, setSorter] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '设备编号',
      dataIndex: 'deviceNo',
      renderFormItem: (_, {value}) => (
          <Input defaultValue={query.deviceNo} value={value}/>
      ),
    },
    {
      title: '记录类型',
      dataIndex: 'type',
      hideInTable: true,
      renderFormItem: (_, {onChange}) => (
          <Select defaultValue={query.type} onChange={onChange}>
            <Select.Option value='status'>状态包</Select.Option>
            <Select.Option value='info'>信息包</Select.Option>
          </Select>
      ),
    },
    {
      title: '记录时间',
      dataIndex: 'recordTime',
      render: (value: any) => {
        let str = '0000-00-00 00:00:00';
        if (value) {
          const date = new Date(value);
          str = moment(date).format('YYYY-MM-DD HH:mm:ss');
        }
        return <Tag>{str}</Tag>;
      },
      renderFormItem: (_, {onChange}) => (
          <DatePicker.RangePicker
              showTime
              format='YYYY-MM-DD HH:mm'
              onChange={value => onChange && onChange(value)}
          />
      ),
    },
    {
      title: '数据包计数',
      dataIndex: 'count',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.count)}</div>,
    },
    {
      title: '信号强度',
      dataIndex: 'rtRssi',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.rtRssi)}</div>,
    },
    {
      title: '信噪比',
      dataIndex: 'rtSnr',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.rtSnr)}</div>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      render: (_, record) =>
          record.statusList.map(status => <Tag color={status?.color}>{status?.label}</Tag>),
    },
    {
      title: '电量',
      dataIndex: 'batt',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.batt)}</div>,
    },
    {
      title: '温度',
      dataIndex: 'temp',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.temp)}</div>,
    },
    {
      title: 'imei',
      dataIndex: 'imei',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.imei)}</div>,
    },
    {
      title: 'sim',
      dataIndex: 'sim',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.sim)}</div>,
    },
    {
      title: '数据',
      dataIndex: 'data',
      hideInSearch: true,
      hideInTable: true,
      render: (_, record) => (
          <div>
            {Object.keys(record).map(key => (
                <Tag key={key} style={{margin: 1, fontSize: 14}}>
                  {key}: {String(record[key])}
                </Tag>
            ))}
          </div>
      ),
    },
    {
      title: '状态更新时间',
      dataIndex: 'stateUpdateAt',
      hideInSearch: true,
      render: (_, record) => <div>{String(record.stateUpdateAt)}</div>,
    },
  ];

  return (
      <PageHeaderWrapper>
        <ProTable<TableListItem>
            headerTitle='设备历史记录'
            actionRef={actionRef}
            rowKey='deviceNo'
            onChange={(_, _filter, _sorter) => {
              const sorterResult = _sorter as SorterResult<TableListItem>;
              if (sorterResult.field) {
                setSorter(`${sorterResult.field}_${sorterResult.order}`);
              }
            }}
            params={{
              sorter,
            }}
            tableAlertRender={() => false}
            request={(params = {}) => {
              const {current: page, pageSize, ...filter} = params;

              return getDeviceMoteData({
                page,
                pageSize,
                deviceNo: query.deviceNo,
                type: query.type,
                ...filter,
              });
            }}
            columns={columns}
            rowSelection={false}
        />
      </PageHeaderWrapper>
  );
};

export default TableList;
